<template>
    <div class="header">
        <div class="top2">
            <div class="title">智能拌合站</div>
            <div class="xiangmu">{{ conpany }}</div>
            <div class="header-right">
                <div class="header-user-con">
                    <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                        <span class="el-dropdown-link">
                            {{ username }}
                            <i class="el-icon-caret-bottom"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
            <div class="date">{{ nowDate }} {{ nowTime }}</div>
        </div>
        <div class="dao">
            <ul class="daohang">
                <li @click="changeIndex(0)" :class="{ t_sel: currentIndex === 0 }">
                    <router-link tag="div" to="/sjzl">
                        <span>数据总览</span>
                    </router-link>
                    <div v-show="currentIndex===0" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
                <li @click="changeIndex(1)" :class="{ t_sel: currentIndex === 1 }">
                    <router-link tag="div" to="/zzzh">
                        <span>指挥中心</span>
                    </router-link>
                    <div v-show="currentIndex===1" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
                <li @click="changeIndex(2)" :class="{ t_sel: currentIndex === 2 }">
                    <router-link tag="div" to="/znsl">
                        <span>智能收料</span>
                    </router-link>
                    <div v-show="currentIndex===2" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
                <li @click="changeIndex(6)" :class="{ t_sel: currentIndex === 6 }">
                    <router-link tag="div" to="/lcgl">
                        <span>料仓管理</span>
                    </router-link>
                    <div v-show="currentIndex===6" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
                <li @click="changeIndex(4)" :class="{ t_sel: currentIndex === 4 }">
                    <router-link tag="div" to="cldd">
                        <span>车辆调度</span>
                    </router-link>
                    <div v-show="currentIndex===4" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>

                <li @click="changeIndex(10)" :class="{ t_sel: currentIndex === 10 }">
                    <router-link tag="div" to="/spjk">
                        <span>视频监控</span>
                    </router-link>
                    <div v-show="currentIndex===10" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
                <li @click="changeIndex(11)" :class="{ t_sel: currentIndex === 11 }">
                    <router-link tag="div" to="/ycjc">
                        <span>扬尘监测</span>
                    </router-link>
                    <div v-show="currentIndex===11" style="width: 100%;height: 6px;background: #00F6FF;position: relative;top: -4px;"></div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                mainname: "",
                nowDate: null, //存放年月日变量
                nowTime: null, //存放时分秒变量
                timer: "", //定义一个定时器的变量
                currentTime: new Date(), // 获取当前时间
                username: "",
                conpany: "",
                name: "",

                currentIndex: 0,
            };
        },
        created() {
            this.timer = setInterval(this.getTime, 1000);
        },
        beforeDestroy() {
            if (this.timer) {
                clearInterval(this.timer); // 在Vue实例销毁前，清除定时器
            }
        },
        methods: {
            // tab 切换
            changeIndex(index) {
                this.currentIndex = index;
            },
            getTime() {
                const date = new Date();
                this.nowDate =
                    date.getFullYear() +
                    "年" +
                    (date.getMonth() + 1) +
                    "月" +
                    date.getDate() +
                    "日";
                this.nowTime =
                    date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
            },
            haha() {
                this.conpany = localStorage.getItem("conpany");
                this.username = localStorage.getItem("username");
                this.mainname = localStorage.getItem("section_principal");
            },

            // 用户名下拉菜单选择事件
            handleCommand(command) {
                if (command == "loginout") {
                    localStorage.removeItem("ms_username");
                    localStorage.removeItem("section_id");
                    localStorage.removeItem("section_name");
                    this.$router.push("/login");
                }
            },
        },
        mounted() {
            this.haha();
        },
    };
</script>
<style scoped>
    .t_sel {
        background: -webkit-linear-gradient(#092354, #02bace);
        background: -o-linear-gradient(#092354, #02bace);
        background: -moz-linear-gradient(#092354, #02bace);
        background: linear-gradient(#092354, #02bace);
    }

    .title {
        width: 186px;
        height: 34px;
        font-size: 36px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #80dbef;
    }

    .dao {
        float: left;
        margin-top: 33px;
        width: 100%;
        height: 50px;
        border-top: 2px solid #24c4ff;
        border-bottom: 2px solid #0057c2;
    }

    #wulian2 span {
        display: flex;
        padding-left: 30px;
        cursor: pointer;
        line-height: 50px;
        width: 110px;
        font-size: 18px;
        height: 50px;
        background: #102357;
        z-index: 999;
    }

    #wulian1 span {
        float: left;
        cursor: pointer;
        line-height: 50px;
        width: 153px;
        font-size: 18px;
        height: 50px;
        background: #102357;
        z-index: 999;
    }

    #wulian span {
        display: flex;
        padding-left: 30px;
        cursor: pointer;
        line-height: 50px;
        width: 110px;
        font-size: 18px;
        height: 50px;
        background: #102357;
        z-index: 999;
    }

    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 150px;
        font-size: 20px;
        color: #fff;
    }

    .top2 {
        margin-top: 10px;
        position: relative;
        width: 100%;
        height: 88px;
        display: flex;
        justify-content: center;
        background: url("../assets/img/hea.webp") no-repeat;
        width: 1920px;
    }

    .daohang {
        width: 100%;
        background-color: #011547;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .daohang li {
        float: left;
        list-style: none;
        width: 153px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
    }

    .xiangmu {
        position: absolute;
        top: 85px;
        right: 20px;
        width: 378px;
        height: 18px;
        font-size: 17px;
        text-align: right;
        font-weight: 400;
        color: rgba(239, 254, 255, 1);
    }

    .header-right {
        position: absolute;
        top: 10px;
        right: 0;
        width: 70px;
        padding-left: 10px;
        padding-top: 5px;
    }

    .date {
        position: absolute;
        top: 10px;
        right: 80px;
        width: 190px;
        padding-left: 10px;
        padding-top: 5px;
        font-size: 16px;
    }

    .header-user-con {
        display: flex;
        height: 20px;
        align-items: center;
    }

    .el-dropdown-link {
        color: floralwhite;
        cursor: pointer;
    }
</style>